<script>
import Vue from 'vue'
import Message from 'element-ui/lib/message'
import MessageBox from 'element-ui/lib/message-box'
import 'element-ui/lib/theme-chalk/message.css'
import 'element-ui/lib/theme-chalk/message-box.css'

function createElement() {
  let instance = createElement._vueInstance_
  if (!instance) {
    instance = createElement._vueInstance_ = new Vue({
      functional: true,
      el: document.createElement('div')
    })
  }
  return instance.$createElement.apply(instance, arguments)
}

function buttonHandler() {
  const deferred = {}
  let promise = new Promise(function(resolve, reject) {
    deferred.resolve = resolve
    deferred.reject = reject
  })
  let callback
  const thenCache = {
    onFulfill: null,
    onReject: null
  }
  const then = (onFulfill, onReject) => {
    thenCache.onFulfill = onFulfill
    thenCache.onReject = onReject
    callback = promise.then(onFulfill, onReject)
  }
  const resetThen = () => {
    promise = new Promise(function(resolve, reject) {
      deferred.resolve = resolve
      deferred.reject = reject
    })
    callback = promise.then(thenCache.onFulfill, thenCache.onReject)
  }
  return {
    handler(action, instance, done) {
      if (instance.confirmButtonLoading) {
        return
      }
      if (action === 'confirm') {
        deferred.resolve('ok')
        if (callback) {
          instance.confirmButtonLoading = true
          callback.then(() => {
            instance.confirmButtonLoading = false
            resetThen()
            done()
          }, (err) => {
            instance.confirmButtonLoading = false
            resetThen()
            return Promise.reject(err)
          })
        } else {
          instance.confirmButtonLoading = false
          done()
        }
      } else {
        deferred.reject()
        done()
      }
    },
    promise: {
      then: then
    }
  }
}

Vue.component('UiMessageContent', {
  props: {
    content: String
  },
  render() {
    if (this.content) {
      return createElement('div', {
        class: 'ui-message-box_content'
      }, this.content)
    } else {
      return null
    }
  }
})

const UiMessageBox = {
  message: Message,
  alert(content, title = '提示', btnText = '我知道了') {
    const p = buttonHandler()
    MessageBox({
      title: title,
      customClass: 'ui-message-box' + (!content ? ' ui-message-box_no-content' : ''),
      showConfirmButton: true,
      showCancelButton: false,
      confirmButtonText: btnText,
      confirmButtonClass: 'ui-message-box_btn-iknow',
      closeOnClickModal: false,
      message: createElement('UiMessageContent', {
        props: {
          content: content
        }
      }),
      beforeClose: p.handler
    })
    return p.promise
  },
  confirm(content, title = '确定', btnText) {
    const p = buttonHandler()
    MessageBox(
      {
        title: title,
        // type: 'error',
        customClass: 'ui-message-box' + (!content ? ' ui-message-box_no-content' : ''),
        showConfirmButton: true,
        showCancelButton: true,
        confirmButtonText: btnText,
        cancelButtonText: '取消',
        closeOnClickModal: false,
        message: createElement('UiMessageContent', {
          props: {
            content: content
          }
        }),
        beforeClose: p.handler
      }
    )
    return p.promise
  }
}

export default UiMessageBox
</script>
